<template>
	<view class="container">
		<!-- 仓库详情标题 -->
		<view class="warehouse-title">
			<!-- 添加图片 -->
			<image class="warehouse-image" src="/static/warehouse_logo.png" alt="仓库图片" />
		</view>
		<!-- 库存数据 -->
		<view class="warehouse-details" v-if="warehouse && warehouse.length > 0">
			<view v-for="(item, index) in warehouse" :key="item.id" class="warehouse-detail">
				<view class="detail-item">
					<text class="label">植物名称:</text>
					<text class="value">{{ item.warehouseName }}</text>
				</view>
				<view class="detail-item">
					<text class="label">库存:</text>
					<text class="value">{{ item.plantnum }}</text>
				</view>
				<view class="detail-item">
					<text class="label">位置:</text>
					<text class="value">{{ item.tregion.regionAddress }}</text>
				</view>
				<view class="detail-item">
					<text class="label">设备数量:</text>
					<text class="value">6 台</text>
				</view>
				<view class="detail-item">
					<text class="label">工人数量:</text>
					<text class="value">2 人</text>
				</view>
				<view class="divider"></view> <!-- 添加一个分割线使多个仓库之间区分 -->
			</view>
		</view>
		<!-- 底部导航栏 -->
		<!-- 操作功能 -->
		<up-tabbar activeColor="#6bc493">
			<up-tabbar-item text="首页" icon="/static/shou.png"
				@click="navigateTo('/pages/index/index')"></up-tabbar-item>
			<up-tabbar-item text="其他" icon="/static/de.png"></up-tabbar-item>
			<u-button class="custom-button" @click="openPopup">上架货物</u-button>
		</up-tabbar>
		<!-- 底部弹窗 -->
		<u-popup ref="popup" mode="bottom" :show="showPopup" @close="closePopup">
			<view class="popup-content">
				<text class="popup-title">上架货物</text>
				<!-- 商品选择下拉框 -->
				<view>
					<up-dropdown>
						<up-dropdown-item v-model="selectedValue" title="选择商品" :options="options"></up-dropdown-item>
					</up-dropdown>
					<div>你选择的商品是：{{ selectedLabel }}</div>
				</view>
				<!-- 商品价格输入框 -->
				<view class="popup-body">
					<label class="label">商品价格：</label>
					<input class="price-input" type="number" v-model="price" placeholder="请输入商品价格"
						@blur="validatePrice" />
					<text v-if="priceError" class="error-text">商品价格不能为空</text>
				</view>
				<!-- 增加/减少数量的按钮及输入框 -->
				<view class="quantity-controller">
					<label class="label">上架数量：</label>
					<u-button class="quantity-button" @click="decreaseQuantity">-</u-button>
					<input class="quantity-input" type="number" v-model.number="quantity" @input="validateQuantity" />
					<u-button class="quantity-button" @click="increaseQuantity">+</u-button>
				</view>
				<!-- 确定和关闭按钮，改为并排显示 -->
				<view class="button-group">
					<u-button class="close-button" @click="confirmSelection">确定</u-button>
					<u-button class="confirm-button" @click="closePopup">关闭</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		computed,
		watch
	} from 'vue';
	import {
		warehouseid
	} from '@/common/api.js';
	import {
		useUserStore
	} from '@/stores/user.js';
	const userStore = useUserStore(); // 获取用户数据
	const showPopup = ref(false); // 控制弹出层显示状态
	const options = ref([{
		id: 1,
		name: '大鹏蔬菜基地'
	}]);
	// 打开弹出层
	const openPopup = () => {
		showPopup.value = true;
	};

	// 关闭弹出层
	const closePopup = () => {
		showPopup.value = false;
	};
	// 使用 ref 来定义响应式变量 wareid 和 warehouse
	const wareid = ref(0); // 存储从上一页传递过来的仓库 ID
	const warehouse = ref([]); // 存储找到的仓库详情
	// 下面都是上架需求
	const quantity = ref(0); // 存储上架数量，默认为1
	const price = ref(''); // 商品价格
	const priceError = ref(false); // 价格错误提示
	const selectedValue = ref({}); // 存储选择的商品对象


	// onMounted 生命周期钩子，用于在组件加载时执行逻辑
	onMounted(() => {
		// 获取当前页面栈
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1]; // 获取当前页面实例

		// 检查页面是否有参数传递
		if (currentPage && currentPage.options) {
			wareid.value = currentPage.options.id; // 从 options 中获取传递的 id
			const re = currentPage.options.regionId;
			const params = {
				userId: userStore.userId,
				regionId:re,
				warehouseDescription: wareid.value,
			}

			warehouseid(params).then(res => {
				// 数据
				warehouse.value = res.data;
				// 转换为选项格式
				const dropdownOptions = res.data.map((item) => ({
					label: item.warehouseName,
					value: item.warehouseId,
				}));

				options.value = dropdownOptions; // 假设 options 是一个响应式变量
				console.log(options);
			});
		} else {
			console.log('没有上一页或未接收到参数');
		}
	});
	// 增加数量
	const increaseQuantity = () => {
		quantity.value++;
	};
	// 验证商品价格
	const validatePrice = () => {
		priceError.value = price.value === '';
	};
	// 减少数量
	const decreaseQuantity = () => {
		if (quantity.value > 1) {
			quantity.value--;
		}
	};
	// 确定选择
	const confirmSelection = () => {
		validatePrice(); // 先进行价格验证
		if (!priceError.value) {
			console.log('上架的商品价格:', price.value);
			console.log('上架的数量:', quantity.value);
			console.log('商品:', selectedLabel.value);
			closePopup(); // 如果没有错误，确定后关闭弹出层
		}
	};
	// 处理选择商品的变化
	const onItemChange = (e) => {
		const index = e.detail.value;
		// 设置选择的商品对象
		selectedItem.value = res[index];
	};

	// 跳转
	const navigateTo = (url) => {
		wx.redirectTo({
			url,
			fail: (err) => {
				console.error('Failed to navigate:', err);
			},
		});
	};

	// 计算属性，用于查找选中的 label
	const selectedLabel = computed(() => {
		// 根据 `selectedValue` 查找对应的选项
		const selectedOption = options.value.find(option => option.value === selectedValue.value);
		return selectedOption ? selectedOption.label : '未选择';
	});

	// 监听 `selectedValue` 的变化，打印相应的 label
	watch(selectedValue, () => {
		console.log('商品:', selectedLabel.value);
	});
</script>

<style scoped>
	.container {
		padding: 20px;
		/* background-color: #f5f5f5; */
	}

	.warehouse-title {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20px;
	}

	.warehouse-image {
		width: 100%;
		height: 200px;
		margin-right: 10px;
		background-color: #aaff00;
		border-radius: 5px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
	}

	/* 修改后的卡片样式 */
	.warehouse-details {
		display: flex;
		flex-direction: column;
		gap: 20px;


		/* 每个卡片之间的间隔 */
	}

	.warehouse-detail {
		padding: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.warehouse-card {
		background-color: #ffffff;
		padding: 15px;
		border-radius: 12px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		display: flex;
		flex-direction: column;
	}

	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.card-image {
		width: 60px;
		height: 60px;
		border-radius: 8px;
		margin-right: 15px;
	}

	.card-title {
		font-size: 20px;
		font-weight: bold;
		color: #333;
	}

	.card-content {
		display: flex;
		flex-direction: column;
	}

	.detail-item {
		display: flex;
		margin-bottom: 8px;
	}

	.label {
		font-weight: bold;
		width: 80px;
		color: #333;
	}

	.value {
		color: #555;
	}

	/* 自定义按钮样式 */
	.custom-button {
		background-color: #00d300;
		/* 设置背景色为蓝色 */
		color: #ffffff;
		/* 设置字体颜色为白色 */
		font-size: 18px;
		/* 设置字体大小 */
		padding: 12px 24px;
		/* 内边距，控制按钮大小 */
		border-radius: 30px;
		/* 设置圆角，使按钮更柔和 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
		/* 为按钮添加阴影效果 */
		border: none;
		/* 去掉默认的边框 */
		/* 	  width: 170px; */
		margin-top: 5px;
		margin-right: 5px;
	}

	/* 设置按钮的悬停效果 */
	.custom-button:hover {
		background-color: #00a700;
		/* 改变悬停时的背景色 */
	}

	.popup-content {
		padding: 20px;
		background-color: #ffffff;
		border-radius: 16px 16px 0 0;
		/* 只对顶部的角进行圆角 */
	}

	.popup-title {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.popup-body {
		margin-bottom: 20px;
	}

	/* 确定和关闭按钮的容器 */
	.button-group {
		display: flex;
		justify-content: space-between;
		gap: 10px;
		/* 设置按钮之间的间距 */
		margin-top: 20px;
	}

	.confirm-button {
		background-color: #00b800;
		/* 确定按钮为绿色 */
		color: #ffffff;
		border-radius: 50px;
		padding: 10px 20px;
		border: none;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		flex: 1;
		/* 使按钮在容器中占相同的宽度 */
	}

	.close-button {
		background-color: #ff4d4f;
		/* 红色关闭按钮 */
		color: #ffffff;
		border-radius: 50px;
		padding: 10px 20px;
		border: none;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		flex: 1;
		/* 使按钮在容器中占相同的宽度 */
	}

	.quantity-controller {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20px;
	}

	.quantity-button {
		background-color: #00b800;
		/* 设置加减按钮为绿色 */
		color: #ffffff;
		font-size: 20px;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.quantity {
		font-size: 18px;
		margin: 0 20px;
	}

	.quantity-input {
		width: 60px;
		text-align: center;
		font-size: 18px;
		margin: 0 10px;
		padding: 5px;
		border: 1px solid #ccc;
		border-radius: 8px;
	}

	.picker {
		padding: 10px;
		background-color: #f0f0f0;
		border-radius: 8px;
		margin-bottom: 20px;
	}

	/* 设置dropdown的容器样式 */
	.dropdown-container {
		background-color: #f0f0f0;
		padding: 10px;
		border-radius: 5px;
	}

	/* 设置dropdown-item的样式 */
	.dropdown-item {
		font-size: 16px;
		color: #333;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		margin-bottom: 5px;
		background-color: #fff;
		cursor: pointer;
	}

	/* 设置dropdown-item的hover样式 */
	.dropdown-item:hover {
		background-color: #f9f9f9;
	}
</style>